<template>
    <div>
      <KTBlankTab v-bind:title="'Select File'">
          <template v-slot:preview>
            <b-row>
                <b-col cols="11">
                  <p>
                    Please select the files for LOC measurement, limited to JAVA files:
                  </p>
                  <b-form-file multiple @change="onFileSelected" accept=".java">
                    <template slot="file-name" slot-scope="{ names }">
                      <b-badge variant="dark">{{ names[0] }}</b-badge>
                      <b-badge v-if="names.length > 1" variant="dark" class="ml-1">
                        + {{ names.length - 1 }} More files
                      </b-badge>
                    </template>
                  </b-form-file>
                </b-col>
                <b-col cols="1">
                  <div>
                    <p>
                      &nbsp;
                    </p>
                  <b-button class="mr-3" variant="outline-primary" v-on:click="LOCAnalysis">Upload</b-button>
                </div>
                </b-col>
              </b-row>
          </template>
        </KTBlankTab>

        <template>
  <div class="card card-custom card-stretch gutter-b">
    <!--begin::Header-->
    <div class="card-header border-0">
      <h3 class="card-title font-weight-bolder text-dark">Trends</h3>
    </div>
    <!--end::Header-->
    <!--begin::Body-->
    <div class="card-body pt-0">
      <!--begin::Item-->
      <template >
        <div
          class="d-flex align-items-center mb-9 rounded p-5"
          v-for="(item, i) in list"
          v-bind:key="i"
          v-bind:class="`bg-light-${item.class}`"
        >
          <!--begin::Icon-->
          <span class="svg-icon mr-5" v-bind:class="`svg-icon-${item.class}`">
            <span class="svg-icon svg-icon-lg">
              <!--begin::Svg Icon | path:assets/media/svg/icons/Home/Library.svg-->
              <inline-svg :src="item.icon" />
              <!--end::Svg Icon-->
            </span>
          </span>
          <!--end::Icon-->
          <!--begin::Title-->
          <div class="d-flex flex-column flex-grow-1 mr-2">
            <a
              href="#"
              class="font-weight-bold text-dark-75 text-hover-primary font-size-lg mb-1"
              >{{ item.title }}</a
            >
            <span class="text-muted font-weight-bold">{{ item.desc }}</span>
          </div>
          <!--end::Title-->
          <!--begin::Lable-->
          <span
            class="font-weight-bolder py-1 font-size-lg"
            v-bind:class="`text-${item.class}`"
            >{{ item.percentage }}</span
          >
          <!--end::Lable-->
        </div>
      </template>
      <!--end::Item-->
    </div>
    <!--end::Body-->
  </div>
</template>
    </div>
  </template>
  
  <script>
  import KTBlankTab from "@/view/content/BlankTab.vue";
  import { SET_BREADCRUMB } from "@/core/services/store/breadcrumbs.module";
  import{ getLOC, uploadCode } from "@/api/loc.js";

  export default {
    data() {
      return {
        list: [
          {
            title: "SLOC",
            desc: "non-commented source line of code or effective lines of code",
            percentage: "0",
            icon: "media/svg/icons/Home/Library.svg",
            class: "warning"
          },
          {
            title: "CLOC",
            desc: "commented source line of code",
            percentage: "0",
            icon: "media/svg/icons/Communication/Write.svg",
            class: "success"
          },
          {
            title: "LOC",
            desc: "total length",
            percentage: "0",
            icon: "media/svg/icons/Communication/Group-chat.svg",
            class: "danger"
          },
        ],
        files : null,
      };
    },
    methods: {
      onFileSelected(event) {
        this.files = event.target.files
        console.log(this.files)
      },
      LOCAnalysis() {
        console.log("上传文件")
        if (!this.files) {
          console.log("1")
          return
        }
        let formData = new FormData()
        formData.append('file', this.files[0])
        uploadCode(formData).then(resp => {
          console.log("上传成功")
          let fileName = resp.data.FILENAME
          getLOC(fileName).then(resp => {
            console.log(resp)
           this.list[0].percentage = resp.data.TotalLine - resp.data.commentLine
           this.list[1].percentage = resp.data.commentLine
           this.list[2].percentage = resp.data.TotalLine
          })
        })
      }
    },
    components: {
      KTBlankTab,
    },
    mounted() {
      this.$store.dispatch(SET_BREADCRUMB, [
        { title: "LOC", route: "loc" },
      ]);
    }
  };
  </script>
  <style>
    @import url("https://unpkg.com/dropzone@5/dist/min/dropzone.min.css");
  </style>
  